<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web音乐播放器</title>
    <style>
        .playlist-item{
            margin: 10px;
            width: 300px;
        }
        .playlist-item.active{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <audio id="music" controls loop></audio>
    <div class="controls">
        <input type="file" id="file" accept="audio/*" multiple style="display: none;">
        <button id="load">加载</button>
        <button id="play">播放</button>
        <button id="pause">暂停</button>
        <button id="next">下一首</button>
    </div>
    <div class="playlist" id="playlist"></div>
    <script>
        let musicList = [];
        let c = 0;
        let isLoadMusic = false;
        const musicPlayer = document.getElementById('music');
        const loadBtn = document.getElementById('load');
        const playBtn = document.getElementById('play');
        const pauseBtn = document.getElementById('pause');
        const nextBtn = document.getElementById('next');
        const playlist = document.getElementById('playlist');

        loadBtn.onclick = function(){
            const fileInput = document.getElementById('file');
            fileInput.click();
            fileInput.onchange = function(){
                const files = fileInput.files;
                if(files.length === 0) return;

                // 初始化音乐列表
                musicList = [];
                isLoadMusic = true;
                currentIndex = 0;
                playlist.innerHTML = ''; // 清空之前的列表

                for(let i = 0; i < files.length; i++){
                    const file = files[i];
                    const url = URL.createObjectURL(file);
                    musicList.push({'src':url, 'title':file.name});
                }

                // 生成音乐列表
                musicList.forEach((music, index) => {
                    const item = document.createElement('div');
                    item.classList.add('playlist-item');
                    item.innerText = `${index + 1}.${music.title}`;
                    item.onclick = function(){
                        playlist.children[currentIndex].classList.remove('active');
                        currentIndex = index;
                        musicPlayer.src = musicList[currentIndex].src;
                        item.classList.add('active');
                        musicPlayer.play();
                    }
                    playlist.appendChild(item);
                })
            }
        }
        playBtn.onclick = ()=> {
            if(!musicPlayer.src){
                // 默认选中第一首
                playlist.children[currentIndex].classList.add('active');
                musicPlayer.src = musicList[currentIndex].src;
            }
            musicPlayer.play();

        }
        pauseBtn.onclick = ()=> {if(isLoadMusic) musicPlayer.pause();}
        nextBtn.onclick = ()=>{
            playlist.children[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % musicList.length;
            playlist.children[currentIndex].classList.add('active');
            musicPlayer.src = musicList[currentIndex].src;
            musicPlayer.play();
        }
    </script>
</body>
</html>
